import { Modal, Form, Input, Row, Col } from "antd";
import { updatePersonalInfo } from '@/api/workbeach';
import { useState, useImperativeHandle, forwardRef } from "react";

const UpdateModal = forwardRef((props, ref) => {
    const [isModalOpen, setIsModalOpen] = useState(false);
    const [id, setId] = useState(1);

    const [form] = Form.useForm();

    useImperativeHandle(ref, () => ({
        showModal: (item) => {
            setId(item.id);
            form.setFieldsValue({
                ADR: item.ADR,
                winRate: item.winRate,
                height: item.height,
                RWS: item.RWS,
                sessioned: item.sessioned,
                remark: item.remark,
                rating: item.rating
            });
            setIsModalOpen(true);
        }
    }));

    const handleOk = async () => {
        try {
            const values = await form.validateFields();
            await updatePersonalInfo({
                id: id,
                data: values
            });
            props.onSuccess();
            setIsModalOpen(false);
        } catch (err) {
            console.error('表单验证失败或提交失败', err);
        }
    };

    const handleCancel = () => {
        setIsModalOpen(false);
    };

    return (
        <Modal title="修改个人信息" open={isModalOpen} onOk={handleOk} onCancel={handleCancel}>
            <Form form={form} layout="vertical">
                <Row gutter={16}>
                    <Col span={12}>
                        <Form.Item name="height" label="天梯分" rules={[{ required: true, message: '请输入天梯分' }]}>
                            <Input allowClear />
                        </Form.Item>
                    </Col>
                    <Col span={12}>
                        <Form.Item name="RWS" label="RWS" rules={[{ required: true, message: '请输入RWS' }]}>
                            <Input allowClear />
                        </Form.Item>
                    </Col>
                </Row>
                <Row gutter={16}>
                    <Col span={12}>
                        <Form.Item name="winRate" label="胜率" rules={[{ required: true, message: '请输入胜率' }]}>
                            <Input allowClear />
                        </Form.Item>
                    </Col>
                    <Col span={12}>
                        <Form.Item name="ADR" label="ADR" rules={[{ required: true, message: '请输入ADR' }]}>
                            <Input allowClear />
                        </Form.Item>
                    </Col>
                </Row>
                <Row gutter={16}>
                    <Col span={12}>
                        <Form.Item name="rating" label="Rating" rules={[{ required: true, message: '请输入Rating' }]}>
                            <Input allowClear />
                        </Form.Item>
                    </Col>
                    <Col span={12}>
                        <Form.Item name="sessioned" label="场次" rules={[{ required: true, message: '请输入场次' }]}>
                            <Input allowClear />
                        </Form.Item>
                    </Col>
                </Row>
                <Form.Item name="remark" label="描述" rules={[{ required: true, message: '请输入描述' }]}>
                    <Input.TextArea rows={4} allowClear />
                </Form.Item>
            </Form>
        </Modal>
    );
});

export default UpdateModal;